<template>
    <div id="addFill">
        <div class="jx-content">
            <div class="topcoumt">
                <div class="search-box fl">
                    <el-form :inline="true"  :model="Form" label-width="120px" class="fl">
                        <el-form-item label="管理员信息 ：">
                            <el-select v-model="Form.info" placeholder="请选择管理员信息">
                                <el-option
                                v-for="item in Form.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form> 
                    <button class="button-style" @click="searchFn">搜 索</button> 
                </div>
                <div class="btn-group fr">
                     <button class="button-style"  @click="deleteAll()" >批量删除</button>
                 </div>
                <div class="btn-group fr">
                    <button class="button-style"  @click="add()" >添 加</button>
                </div>
            </div>
            <div class="table">
               <el-table :data="tableData" style="width: 100%">
                    <el-table-column  type="selection" width='100'>
                    </el-table-column>
                    <el-table-column prop="classname" label="管理员名称"></el-table-column>
                    <el-table-column prop="class" label="工号" :disabled="true" ></el-table-column>
                    <el-table-column prop="number" label="手机号"></el-table-column>
                    <el-table-column prop="name" label="角色">
                        <template slot-scope="scope">
                            <span v-if="scope.row.roleId == 3">超级管理员</span>
                            <span v-if="scope.row.roleId == 4">普通管理员</span>
                        </template>
                    </el-table-column>
                    <el-table-column  label="操作">
                         <template slot-scope="scope">
                            <el-button type="text" size="small"  @click="repeatFn(scope.row.id)">修改</el-button>
                            <!-- <el-button type="text" size="small" style="color:#959595" >修改</el-button> 超级管理员 -->
                            <el-button type="text" size="small"  @click="repeatCode(scope.row.id)">初始密码</el-button>
                            
                        </template>
                    </el-table-column>
                </el-table>
            </div>
             <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
             ></el-pagination>
              <el-dialog  title="添加用户" :visible.sync="dialogVisible" width="35%"  @close="closeDialog">
                <el-form ref="formlist" :inline="true"  :rules="rules" :model="formlist" >
                    <el-form-item label="姓名 :" prop="name">
                        <el-input v-model="formlist.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="工号 :" prop="number">
                        <el-input v-model="formlist.number" placeholder="请输入工号"></el-input>
                    </el-form-item>
                     <el-form-item label="手机号 :" >
                        <el-input v-model="formlist.telephone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                     <el-form-item label="角色 ：" prop="role" >
                            <el-select v-model="formlist.role" placeholder="请选择角色">
                                <el-option
                                v-for="item in formlist.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                    </el-form-item>
                     <el-form-item label="密码 :" prop="passWord">
                        <el-input v-model="formlist.passWord" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码 :" prop="checkPass">
                        <el-input v-model="formlist.checkPass" placeholder="请输入工号"></el-input>
                    </el-form-item>
                </el-form>
                <div class="btn-center" style="text-align: center;">
                    <button class="button-style" @click="submit('formlist')" >保 存</button>
                </div>
             </el-dialog>
            <el-dialog  title="修改用户" :visible.sync="dialog" width="35%" >
                <el-form ref="formlist2" :inline="true"  :rules="rules2" :model="formlist" >
                    <el-form-item label="姓名 :" prop="name">
                        <el-input v-model="formlist2.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="工号 :" prop="number" >
                        <el-input v-model="formlist2.number" :disabled="true"  placeholder="请输入工号"></el-input>
                    </el-form-item>
                     <el-form-item label="手机号 :" >
                        <el-input v-model="formlist2.telephone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                     <el-form-item label="角色 ：" prop="role" >
                            <el-select v-model="formlist2.role" placeholder="请选择角色">
                                <el-option
                                v-for="item in formlist2.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                    </el-form-item>
                     <el-form-item label="密码 :" prop="passWord">
                        <el-input v-model="formlist2.passWord" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码 :" prop="checkPass">
                        <el-input v-model="formlist2.checkPass" placeholder="请输入工号"></el-input>
                    </el-form-item>
                </el-form>
                <div class="btn-center" style="text-align: center;">
                    <button class="button-style" @click="submit('formlist2')" >保 存</button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            //手机号验证
            var validPhone = (rule, value,callback)=>{
               
                if (!value){
                    callback(new Error('请输入电话号码'))
                }else {
                    if (value !== '') { 
                        var reg=/^1[3456789]\d{9}$/;
                        if(!reg.test(value)){
                        callback(new Error('请输入正确的11位手机号码'));
                        }
                    }
                    callback();
                    }
            }
            //密码验证
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'))
                } else {
                    if (this.formlist.checkPass !== '') {
                        this.$refs.formlist.validateField('checkPass')
                    }
                        callback()
                    }
            }
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'))
				} else if (value !== this.formlist.passWord) {
					callback(new Error('两次输入密码不一致!'))
				} else {
					callback()
				}
            }
            return {
                dialogVisible:false,
                dialog:false,
                formlist:{
                     number:'',
                     name:'',
                     checkPass:'',
                     passWord:'',
                     telephone:'',
                     role:'',
                      options: [{
                        value: '3',
                        label: '超级管理员'
                        },{
                        value: '4',
                        label: '普通管理员'
                        }],
                },
                formlist2:{
                     number:'',
                     name:'',
                     checkPass:'',
                     passWord:'',
                     telephone:'',
                     role:'',
                      options: [{
                        value: '3',
                        label: '超级管理员'
                        },{
                        value: '4',
                        label: '普通管理员'
                        }],
                },
                Form:{
                    info:'',
                     options: [{
                        value: '选项1',
                        label: '黄金糕'
                        }, {
                        value: '选项4',
                        label: '龙须面'
                        }, {
                        value: '选项5',
                        label: '北京烤鸭'
                        }],
                },
                 rules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
					],
                    number: [
                        { required: true, message: '请输入工号', trigger: 'blur' }
                    ],
                    role: [
                        { required: true, message: '请输入角色', trigger: 'blur' }
                    ],
                    telephone: [
                        { required: true, message: '请输入联系方式', trigger: 'blur' },
                        { required: true, validator: validPhone, trigger: 'blur' }
					],
                    passWord: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
						{ required: true, validator: validatePass, trigger: 'blur' }
					],
					checkPass: [
                        { required: true, message: '请输入确认密码', trigger: 'blur' },
						{ required: true, validator: validatePass2, trigger: 'blur' }
                    ]
                },
                 rules2: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
					],
                    number: [
                        { required: true, message: '请输入工号', trigger: 'blur' }
                    ],
                    role: [
                        { required: true, message: '请输入角色', trigger: 'blur' }
                    ],
                    telephone: [
                        { required: true, message: '请输入联系方式', trigger: 'blur' },
                        { required: true, validator: validPhone, trigger: 'blur' }
					],
                    passWord: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
						{ required: true, validator: validatePass, trigger: 'blur' }
					],
					checkPass: [
                        { required: true, message: '请输入确认密码', trigger: 'blur' },
						{ required: true, validator: validatePass2, trigger: 'blur' }
                    ]
                },
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                tableData: [{
                classname: '2016-05-02',
                class:'大数据',
                number:'212121212',
                name: '王小虎'
                }],
             }
        },
        created() {
            //此处需要得到角色身份
        },
        methods: {
            //关闭弹窗
            closeDialog(){
                this.$refs.formlist.resetFields()
            },
            //搜索
            searchFn(){

            },
            //保存
            submit(){
               alert(1)
            },
            //添加
            add(){
              this.dialogVisible=true
            },
            //批量删除
            deleteAll(){

            },
            //修改
            repeatFn(){
               this.dialog=true
            },
            //初始密码
            repeatCode(){

            },
            //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                //this.init()
            },
        }
    }
</script>
<style scoped>
 .el-select>>>.el-input__inner{
     width: 170px;         
}
.el-form-item>label{
    text-align: right
}
.el-form--inline>>>.el-form-item__label {
    text-align: right;
    float: left;
    display: inline-block;
    width: 105px !important;
}
.el-form >>>.el-input__inner{
     width: 170px;   
}
</style>
<style lang="scss" scoped>
@import "./../../../styles/layout/color_variables";
 #addFill {
    width: $width;
    margin: 20px auto;
    color: #727272;
      .topcoumt{
       overflow: hidden;
        .button-style{
           margin-top: 5px;
           margin-right: 15px;
        }
     }
 }
</style>